<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奇妙园填词游戏三岁1</title>
    <link rel="stylesheet" href="../../css/currency.css">
    <style>
        .section{
            width: 1080px;
            height: 1920px;
            overflow: hidden;
            position: relative;
        }
        .section:before{
            content: "";
            width: 160%;
            height: 90%;
            background:
                    linear-gradient(36deg, #FFF8A2 42.34%, transparent 42.34%) 0 0,
                    linear-gradient(72deg, #FFFFFF 75.48%, transparent 75.48%) 0 0,
                    linear-gradient(-36deg, #FFF8A2 42.34%, transparent 42.34%) 100% 0,
                    linear-gradient(-72deg, #FFFFFF 75.48%, transparent 75.48%) 100% 0,
                    linear-gradient(36deg, transparent 57.66%, #FFFFFF 57.66%) 100% 100%,
                    linear-gradient(72deg, transparent 24.52%, #FFFA99 24.52%) 100% 100%,
                    linear-gradient(-36deg, transparent 57.66%, #FFFFFF 57.66%) 0 100%,
                    linear-gradient(-72deg, transparent 24.52%, #FFFA99 24.52%) 0 100%,
                    #FFF8A2 linear-gradient(#FFFF8E, #FFFFFF) 50% 100%;
            background-repeat: no-repeat;
            background-size: 50% 50%;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            transform: translateX(-50%) translateY(-50%) scale(0) rotate(360deg);
            transition: all 0.3s ease 0s;
        }
        .src_before:before{
            opacity: 0.5;
            transform: translateX(-50%) translateY(-50%) scale(1.5) rotate(-360deg);
        }
        .section:after{
            content: "";
            width: 160%;
            height: 90%;
            background: radial-gradient(rgba(255,255,255,0.9),transparent,transparent);
            position: absolute;
            top: 0;
            left: -35%;
            opacity: 0;
            pointer-events: none;
        }
        .sec_after:after{ opacity: 1; }
        .shou{
            position: absolute;
            top: 1121px;
            left: 400px;
        }
        @-webkit-keyframes bounce-up {
            25% {
                -webkit-transform: translateY(10px);
            }
            50%, 100% {
                -webkit-transform: translateY(0);
            }
            75% {
                -webkit-transform: translateY(-10px);
            }
        }
        @keyframes bounce-up {
            25% {
                transform: translateY(10px);
            }
            50%, 100% {
                transform: translateY(0);
            }
            75% {
                transform: translateY(-10px);
            }
        }
        .animate-bounce-up1{
            opacity: 1;
            -webkit-backface-visibility: hidden;
            -webkit-animation: bounce-up 1.6s linear infinite;
            animation: bounce-up 1.6s linear infinite;
        }
        .animate-bounce-up2{
            opacity: 1;
            -webkit-backface-visibility: hidden;
            -webkit-animation: bounce-up 1.4s linear infinite;
            animation: bounce-up 1.4s linear infinite;
        }
        .animate-bounce-up3{
            opacity: 1;
            -webkit-backface-visibility: hidden;
            -webkit-animation: bounce-up 1.8s linear infinite;
            animation: bounce-up 1.8s linear infinite;
        }
        .animate-bounce-up4{
            opacity: 1;
            -webkit-backface-visibility: hidden;
            -webkit-animation: bounce-up 2.2s linear infinite;
            animation: bounce-up 2.2s linear infinite;
        }
        .aa,.a{
            position: absolute;
            top: 1041px;
            left: 511px;
        }
        .cc,.c{
            position: absolute;
            top: 1033px;
            left: 409px;
        }
        .tt,.t{
            position: absolute;
            top: 1035px;
            left: 616px;
        }
        .cc,.aa,.tt{display: none;}
        .cbtn{
            width: 162px;
            height: 162px;
            border-radius: 162px;
            position: absolute;
            top: 1388px;
            left: 227px;
            z-index: 100;
            background: url("../../img/cat/cbtn.png") no-repeat;
        }
        .abtn{
            width: 162px;
            height: 162px;
            border-radius: 162px;
            position: absolute;
            top: 1331px;
            left: 633px;
            z-index: 100;
            background: url("../../img/cat/abtn.png") no-repeat;
        }
        .tbtn{
            width: 162px;
            height: 162px;
            border-radius: 162px;
            position: absolute;
            top: 1464px;
            left: 430px;
            z-index: 100;
            background: url("../../img/cat/tbtn.png") no-repeat;
        }
        .button:focus {
            outline:0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        .button:before, .button:after {
            position: absolute;
            content: '';
            display: block;
            width: 200%;
            height: 100%;
            left: -50%;
            z-index: 100;
            -webkit-transition: all ease-in-out 0.5s;
            transition: all ease-in-out 0.5s;
            background-repeat: no-repeat;
        }
        .button:before {
            display: none;
            top: -50%;
            background-image:
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, transparent 20%, #F4F7FF 20%, transparent 30%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, transparent 20%, #F4F7FF 20%, transparent 30%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, transparent 10%, #F4F7FF 15%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%);
            background-size: 20% 20%, 30% 30%, 25% 25%, 30% 30%, 28% 28%, 20% 20%, 25% 25%, 20% 20%, 28% 28%,28% 28%, 20% 20%, 25% 25%;
        }
        .button:after {
            display: none;
            bottom: -50%;
            background-image:
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, transparent 10%, #F4F7FF 15%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, #F4F7FF 20%, transparent 20%),
                    radial-gradient(circle, transparent 10%, #F4F7FF 15%, transparent 20%);
            background-size: 25% 25%, 30% 30%, 28% 28%, 30% 30%, 25% 25%, 20% 20%, 30% 30%, 25% 25%, 30% 30%, 28% 28%;
        }
        .button:active {
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
            background-color: #F4F7FF;
            box-shadow: 0 2px 25px #F4F7FF;
        }
        .button.animate:before {
            display: block;
            opacity: 1;
            -webkit-backface-visibility: hidden;
            -webkit-animation: topBubbles ease-in-out 0.75s forwards;
            animation: topBubbles ease-in-out 0.75s forwards;
        }
        .button.animate:after {
            display: block;
            opacity: 1;
            -webkit-backface-visibility: hidden;
            -webkit-animation: bottomBubbles linear 0.75s forwards;
            animation: bottomBubbles linear 0.75s forwards;
        }
        @-webkit-keyframes topBubbles {
            0% {
                background-position:-5% 90%,0% 90%, 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%,60% 90%, 70% 90%;
            }
            50% {
                background-position:0% 90%, 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 20%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
            }
            100% {
                background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%, 80% 10%, 75% 0%, 70% -5%;
                background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
            }
        }
        @-webkit-keyframes bottomBubbles {
            0% {
                background-position:0% 0%, 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%,80% 0%,90% -10%;
            }
            50% {
                background-position:0% 70%, 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%,80% 50%, 95% 60%, 105% 0%,100% -10%;
            }
            100% {
                background-position: -5% 80%, 2% 33%, 20% 90%, 45% 70%, 60% 94%, 75% 80%, 95% 70%, -2% -1%,88% 10%,103% 0%;
                background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
            }
        }
        .cat{
            position: absolute;
            top: 810px;
            left: 455px;
            animation: zy 2.5s .15s linear infinite;
            -webkit-animation: zy 2.5s .15s linear infinite;
        }
        @-webkit-keyframes zy {
            10%{-webkit-transform: rotate(15deg);}
            20%{-webkit-transform: rotate(-10deg);}
            30%{-webkit-transform: rotate(5deg)}
            40% {-webkit-transform: rotate(-5deg);  }
            50%,100% {-webkit-transform: rotate(0deg);}
        }
        @keyframes zy {
            10%{transform: rotate(15deg);}
            20%{transform: rotate(-10deg);}
            30%{transform: rotate(5deg)}
            40% {transform: rotate(-5deg);  }
            50%,100% {transform: rotate(0deg);}
        }
        .countdown{
            width: 275px;
            height: 36px;
            font-size: 36px;
            text-align: center;
            font-family: DFHaiBaoGB-W12;
            font-weight: normal;
            color: rgba(255,255,255,1);
            line-height: 36px;
            letter-spacing: 2px;
            position: absolute;
            left: 170px;
            top: 1810px;
        }
    </style>
</head>
<body>
<div class="commit_head">
    <img src="../../img/icon.gif" alt="" class="commit_icon"/>
    <span class="commit_build">熊孩子点吧</span>
    <img src="../../img/close.png" alt="" class="commit_close"/>
</div>
<div class="section">
    <img class="content" src="../../img/word.jpg" alt="">
    <img src="../../img/cat/cat.png" class="cat"/>
    <img src="../../img/shou.png" class="shou animate-bounce-up3"/>
    <img src="../../img/cat/aa.png" class="aa"/>
    <img src="../../img/cat/a.png" class="a"/>
    <img src="../../img/cat/cc.png" class="cc"/>
    <img src="../../img/cat/c.png" class="c"/>
    <img src="../../img/cat/tt.png" class="tt"/>
    <img src="../../img/cat/t.png" class="t"/>
    <div class="cbtn button animate-bounce-up1"></div>
    <div class="abtn button animate-bounce-up2"></div>
    <div class="tbtn button animate-bounce-up4"></div>
    <audio src="../../audio/c.mp3" id="c_audio" type="audio/mpeg"></audio>
    <audio src="../../audio/a.mp3" id="a_audio" type="audio/mpeg"></audio>
    <audio src="../../audio/cat.mp3" id="cat_audio" type="audio/mpeg"></audio>
    <audio src="../../audio/success.wav" id="success" type="audio/mpeg"></audio>
    <audio src="../../audio/fail.wav" id="fail" type="audio/mpeg"></audio>
    <div class="countdown">倒计时：<span class="time">60</span>秒</div>
</div>
<script src="../../js/jquery-2.2.4.min.js"></script>
<script src="../../js/getrequest.js"></script>
<script>
    $(function () {
        /*设置显示的时间*/
        var count = 60;
        $('.time').html(count);
        /*设置定时器，1s一次*/
        var setV = setInterval(function () {
            count--;
            $('.time').html(count);
            /*判断当count的值小于0的时候游戏时间到，并关闭定时器*/
            if (count <= 0) {
                $("#success").get(0).play();
                setTimeout(function () {
                    $(".section").addClass("src_before");
                    $(".section").addClass("sec_after");
                }, 500);
                setTimeout(function () {
                    window.location.href = "./word32.html?id=" + id+"&mark=4";
                }, 1000);
            }
        },1000);
    });
    var a=GetRequest();
    var id=a['id'];
    if(id == "draw3"||id == "draw6"){
        $(".commit_build").html("画一画");
    }else if(id == "line3"||id == "line6"){
        $(".commit_build").html("连一连");
    }else if(id == "word3"||id == "word6"){
        $(".commit_build").html("找一找");
    }
    $("body").on("touchstart",  function(){
        $("#fail").get(0).load();
    });
    var btnnum = 1;
    var mark = 0;
    $(".cbtn").click(function () {
        $(".cbtn").addClass('animate');
        setTimeout(function(){
            $(".cbtn").removeClass('animate');
        },1000);
       setTimeout(function(){
            $(".cbtn").hide();
        },700);
        $("#c_audio").get(0).play();
        $(".c").hide();
        $(".cc").show();
        $(".shou").css("left","502px")
        btnnum = 2;
    });
    $(".abtn").click(function () {
        if(btnnum == 2){
            $(".abtn").addClass('animate');
            setTimeout(function(){
                $(".abtn").removeClass('animate');
            },500);
            setTimeout(function(){
                $(".abtn").hide();
            },1000);
            $("#a_audio").get(0).play();
            $(".a").hide();
            $(".aa").show();
            $(".shou").css("left","605px")
            btnnum = 3;
        }else{
            mark++;
            console.log(mark);
            $("#fail").get(0).play();
        }
    });
    $(".tbtn").click(function () {
        if(btnnum == 3){
            $(".tbtn").addClass('animate');
            setTimeout(function(){
                $(".tbtn").removeClass('animate');
            },500);
            setTimeout(function(){
                $(".tbtn").hide();
            },1000);
            $("#cat_audio").get(0).play();
            $(".t").hide();
            $(".tt").show();
            $(".shou").hide();
            setTimeout(function(){
                $(".section").addClass("src_before");
                $(".section").addClass("sec_after");
            },2000);
            setTimeout(function(){
                window.location.href = "./word32.html?id="+id+"&mark="+mark;
            },2500);
        }else{
            mark++;
            console.log(mark);
            $("#fail").get(0).play();
        }
    });
    //点击关闭
    $(".commit_close").click(function(){
        //调用安卓方法
        JsBinder.onFinishActivity();
    })
    JsBinder.setActivityClose(false); //隐藏浏览器右上角关闭图表
</script>
</body>
</html>